<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/getParameter.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>详情</title>
<script>
	$(function() {
		//查询用户信息
		$("#u_inf").hide();
		$("#logout").hide();
		$.get("./fillServlet", {}, function(data) {
			//{uid:1,name:'李四'}
			if (data != null && data.length != 0) {
				$("#reg").hide();
				$("#u_inf").show();
				$("#logout").show();
				$("#u_inf").text("欢迎," + data.username);
			} else {
				$("#reg").show();
			}
		});
 
		
	var cityid = getParameter('cityid');
		$.get("./toListServlet",{cityid : cityid},function(data) {
			             $("h2").hide();
			             if(data == null||data.length==0)
			            	 $("h2").show();
							$("#firstfood").css(
									{
										"background" : "url('" + data[0].fimg1
												+ "') no-repeat",
										"background-size" : "100%"
									});
							$("#firstfood a").text(data[0].foodname).prop("href","./detailed.html?foodid="+data[0].foodid+"&cityid="+cityid);
							$("#firstfood span").text(
									'"' + data[0].foodinf + '"');

							$("#secfood").css(
									{
										"background" : "url('" + data[1].fimg1
												+ "') no-repeat",
										"background-size" : "100%"
									});
							$("#secfood a").text(data[1].foodname).text(data[1].foodname).prop("href","./detailed.html?foodid="+data[1].foodid+"&cityid="+cityid);
							$("#secfood span")
									.text('"' + data[1].foodinf + '"');

							$("#thrfood").css(
									{
										"background" : "url('" + data[2].fimg1
												+ "') no-repeat",
										"background-size" : "100%"
									});
							$("#thrfood a").text(data[2].foodname).text(data[2].foodname).prop("href","./detailed.html?foodid="+data[2].foodid+"&cityid="+cityid);
							$("#thrfood span")
									.text('"' + data[2].foodinf + '"');

							$("#fouthfood").css(
									{
										"background" : "url('" + data[3].fimg1
												+ "') no-repeat",
										"background-size" : "100%"
									});
							$("#fouthfood a").text(data[3].foodname).text(data[3].foodname).prop("href","./detailed.html?foodid="+data[3].foodid+"&cityid="+cityid);
							$("#fouthfood span").text(
									'"' + data[3].foodinf + '"');

							var list = '';
							try {
								for (var i = 4; i <= data.length; i++) {
									var div = '<div class="container" id="foodlist">'
											+ '<div class="row"><div class="col-sm-4">'
											+ '<img id="big" src="'+data[i].fimg1+'">'
											+ '</div><div class="col-sm-8"><div class="row">'
											+ '<a id="nextlist" href="./detailed.html?cityid='+cityid+'&foodid='+data[i].foodid+'">'
											+ data[i].foodname
											+ '</a> '
											+ '<br><br><span>'
											+ data[i].foodinf
											+ '</span></div>'
											+ '<div class="row"><img id="small" src="'+data[i].fimg2+'">'
											+ '<img id="small"src="'+data[i].fimg3+'"> '
											+ '<img id="small"src="'+data[i].fimg4+'"></div></div></div></div>';
									list += div;
								}
							} catch (e) {
								$(".listt").html(list);
							}
						});
   					
	});
</script>

<style type="text/css">
#first {
	border: gray 2px solid;
	background: url("./img/header_bg.jpg") no-repeat;
	background-size: 100%;
	height: 120px;
	border-radius: 10px;
}

#p1 {
	color: #D3D3D3;
	font-style: oblique;
	font-size: 40px;
	font-family: "华文琥珀";
	margin-top: 28px;
	margin-left: 40px;
	float: left;
}

#p2 {
	color: black;
	font-size: 25px;
	font-family: "仿宋";
	padding-top: 45px;
	margin-left: 480px;
}

#word {
	width: 80px;
	height: 80px;
}

#xx {
	width: 75px;
	height: 105px;
}

.footer {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 20px;
}

#imp {
	background: #F8F8FF;
	height: 500px;
	margin-top: 5px;
	border-radius: 10px; 
}

h2{
	text-align: center;
    margin: 100px 0 0 0;
}
#firstfood {
	height: 460px;
	width: 520px; /*  背景图片的宽高  */
	margin-top: 20px;
	margin-left: 30px;
}

#firstfood a {
	color: white;
	font-size: 20px;
	font-family: "宋体";
	font-style: oblique;
	margin-top: 345px;
	margin-left: 20px;
	display: inline-block;
}

#firstfood span {
	color: #DCDCDC;
	margin-left: 20px;
	display: inline-block;
}

#secfood {
	margin-top: 20px;
	margin-left: 20px;
	height: 220px;
	width: 550px;
}

#secfood a {
	color: white;
	font-size: 20px;
	font-family: "宋体";
	font-style: oblique;
	margin-top: 145px;
	margin-left: 20px;
	display: inline-block;
}

#secfood span {
	color: #DCDCDC;
	margin-left: 20px;
	display: inline-block;
}

#thrfood {
	margin-top: 20px;
	margin-left: 35px;
	height: 220px;
	width: 270px;
}

#thrfood a {
	color: white;
	font-size: 20px;
	font-family: "宋体";
	font-style: oblique;
	margin-top: 95px;
	display: inline-block;
}

#thrfood span {
	color: #DCDCDC;
}

#fouthfood {
	margin-top: 20px;
	margin-left: 20px;
	width: 260px;
	height: 220px;
}

#fouthfood a {
	color: white;
	font-size: 20px;
	font-family: "宋体";
	font-style: oblique;
	margin-top: 95px;
	display: inline-block;
}

#fouthfood span {
	color: #DCDCDC;
}

#foodlist {
	background: #F8F8F0;
	height: 300px;
	margin-top: 20px;
	border-radius: 10px;
	margin-left: -16px;
}

#foodlist a {
	color: black;
	font-size: 20px;
	font-family: "宋体";
	font-style: oblique;
	display: inline-block;
	margin: 30px 0 0 10px;
}

#foodlist span {
	color: gray;
	width: 600px;
	display: inline-block;
	margin: 10px 0 0 10px;
}

#big {
	height: 280px;
	width: 320px;
	margin: 10px 0 0 20px;
}

#small {
	height: 110px;
	width: 150px;
	border-radius: 5px;
	margin: 50px 0 10px 5px;
}
</style>
</head>
<body>
	<div class="container-fluid">
		<div class="row" id="first"></div>
		<div class="row">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
							data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span> <span
								class="icon-bar"></span> <span class="icon-bar"></span> <span
								class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="./index.html">首页</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="./collection.html">我的收藏 <span
									class="sr-only">(current)</span></a></li>
						</ul>
						<form class="navbar-form navbar-right" role="search" action="./searchlist.html">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="关键词搜索"  name="keyword">
								<input name="currentpage" value=0 style="display: none;">
							</div>
							<input type="submit" id="sss" value="搜索"  class="btn btn-default ">
						</form>
						<ul class="nav navbar-nav navbar-right">
							<li><a href="./register.html">注册</a></li>
							<li><a id=u_inf></a></li>
							<li id=reg><a href="./Login.jsp">登录</a></li>
							<li id=logout><a
								href="javascript:location.href='userLogoutServlet';">退出登录</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</div>

	<div class="container">
		<div class="row" id="daohang">
			<ol class="breadcrumb">
				<li><a href="./first.html">首页</a></li>
				<li>美食列表</li>
			</ol>
		</div>

	<div id="todetial">
		<div class="row" id="imp">
		   <h2>当前省份暂无数据！</h2>
			<div class="col-sm-6" id="firstfood">
				<a href="#"></a><br> <span></span>
			</div>
			<div class="col-sm-6">
				<div class="row" id="secfood">
					<a href="#"></a><br> <span></span>
				</div>
				<div class="row">
					<div class="col-sm-6" id="thrfood">
						<a href="#"></a><br> <span></span>
					</div>
					<div class="col-sm-6" id="fouthfood">
						<a href="#"></a><br> <span></span>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="listt"></div>
   </div>
	<div class="footer">
		<hr>
		Copyright © 2020, <a href="./index.html">&#160&#160嗣食肆&#160</a>&#160All
		Rights Reserved
	</div>
</body>
</html>